<script setup lang="tsx">
import { defineModel, defineProps, reactive, ref } from 'vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { useTable } from '@/hooks/common/table';

interface Props {
  mainRef: any;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

interface Model {
  [key: string]: any;
}

const { formRef } = useAntdForm();
const { defaultRequiredRule } = useFormRules();

const model: Model = reactive(createDefaultModel());
type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
  model: defaultRequiredRule
};

function createDefaultModel(): Model {
  return {
    lot: null,
    time: null,
    model: null,
    checkType: null,
    pnl: null,
    bg: null,
    cs: null,
    jh: null,
    xs: null,
    sm: null,
    smsj: null,
    zqxq: null,
    zqsj: null,
    hdyq: null,
    ymhdz: null,
    ymhdz1: null,
    ymhdz2: null,
    ymhdz3: null,
    ymhdz4: null,
    ymhdz5: null,
    ymhdzb: null,
    ymhdzb1: null,
    ymhdzb2: null,
    ymhdzb3: null,
    ymhdzb4: null,
    ymhdzb5: null,
    bls: null,
    bllv: null,
    bb: null,
    pb: null,
    jyy: null,
    shr: null
  };
}

interface InputList {
  key: string;
  title: string;
  type?: string;
  selectOptions?: any[];
  disabled?: boolean;
  placeholder?: string | boolean;
}

const inputList = ref<InputList[]>([
  {
    key: 'bg',
    title: '工程图变更检查'
  },
  {
    key: 'cs',
    title: '曝光尺级数'
  },
  {
    key: 'jh',
    title: '曝光机号'
  },
  {
    key: 'xs',
    title: '显影机号'
  },
  {
    key: 'sm',
    title: '油墨颜色要求'
  },
  {
    key: 'smsj',
    title: '油墨颜色实际',
    type: 'select',
    selectOptions: [
      {
        name: '一致',
        value: '0'
      },
      {
        name: '不一致',
        value: '1'
      }
    ]
  },
  {
    key: 'zqxq',
    title: '周期需求',
    type: 'select',
    selectOptions: [
      {
        name: '是焊接需求',
        value: '0'
      },
      {
        name: '不是焊接需求',
        value: '1'
      }
    ]
  },
  {
    key: 'zqsj',
    title: '周期实际'
  },
  {
    key: 'hdyq',
    title: 'A面油墨厚度要求'
  },
  {
    key: 'ymhdz1',
    title: 'A面油墨厚度实际值1'
  },
  {
    key: 'ymhdz2',
    title: 'A面油墨厚度实际值2'
  },
  {
    key: 'ymhdz3',
    title: 'A面油墨厚度实际值3'
  },
  {
    key: 'ymhdz4',
    title: 'A面油墨厚度实际值4'
  },
  {
    key: 'ymhdz5',
    title: 'A面油墨厚度实际值5'
  },

  {
    key: 'ymhdzb',
    title: 'A面油墨厚度要求'
  },
  {
    key: 'ymhdzb1',
    title: 'B面油墨厚度实际值1'
  },
  {
    key: 'ymhdzb2',
    title: 'B面油墨厚度实际值2'
  },
  {
    key: 'ymhdzb3',
    title: 'B面油墨厚度实际值3'
  },
  {
    key: 'ymhdzb4',
    title: 'B面油墨厚度实际值4'
  },
  {
    key: 'ymhdzb5',
    title: 'B面油墨厚度实际值5'
  },
  {
    key: 'bls',
    title: '不良数'
  },
  {
    key: 'bllv',
    title: '不良率',
    disabled: true,
    placeholder: ' '
  },
  {
    key: 'bb',
    title: '班别',
    type: 'radio',
    selectOptions: [
      {
        name: '白班',
        value: '0'
      },
      {
        name: '夜班',
        value: '1'
      }
    ]
  },
  {
    key: 'pb',
    title: '判别',
    type: 'radio',
    selectOptions: [
      {
        name: 'ACC',
        value: '0'
      },
      {
        name: 'REJ',
        value: '1'
      }
    ]
  }
]);

const activeKey = ref<string>('1');

const { columns } = useTable({
  apiFn: async () => {
    return await [];
  },
  columns: () => [
    {
      key: 'index',
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      width: 80
    },
    {
      key: 'jyxm',
      title: '检验项目',
      align: 'center',
      dataIndex: 'jyxm'
    },
    {
      key: 'qxsl',
      title: '缺陷数量',
      align: 'center',
      dataIndex: 'qxsl',
      customRender: ({ record }) => {
        return <AInput v-model:value={record.qxsl} />;
      }
    }
  ]
});

const data = ref([
  {
    index: 1,
    jyxm: '油墨异物',
    qxsl: 0
  },
  {
    index: 2,
    jyxm: '防焊刮伤',
    qxsl: 0
  },
  {
    index: 3,
    jyxm: '油墨色差',
    qxsl: 0
  },
  {
    index: 4,
    jyxm: '盖塞孔不良',
    qxsl: 0
  },
  {
    index: 5,
    jyxm: '盖塞孔不良',
    qxsl: 0
  }
]);
console.log('props.mainRef :>> ', props.mainRef);
</script>

<template>
  <AModal
    v-model:open="visible"
    title="阻焊记录表新增"
    width="80vw"
    wrap-class-name="menu-modal"
    :mask="false"
    :get-container="() => props.mainRef"
  >
    <div class="my-form-content h-70vh p-15px">
      <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ lg: 8, xs: 4 }" label-wrap>
        <ARow :gutter="20">
          <ACol :lg="12" :xs="24">
            <AFormItem label="lot号" name="lot" :label-col="{}">
              <AInputGroup compact class="w-80%">
                <AInput v-model:value="model.lot" placeholder="请输入lot号" style="width: calc(100% - 200px)" />
                <AButton type="primary">查询</AButton>
              </AInputGroup>
            </AFormItem>
          </ACol>
          <ACol :lg="12" :xs="24">
            <AFormItem label="生产型号" name="model" :label-col="{}">
              <!-- <AInputSearch v-model:value="model.lot"  class="w-60%" /> -->
              <AInputGroup compact class="w-80%">
                <AInput v-model:value="model.model" placeholder="请输入生产型号" style="width: calc(100% - 200px)" />
                <AButton type="primary">查询</AButton>
              </AInputGroup>
            </AFormItem>
          </ACol>
          <ACol :lg="8" :xs="12">
            <AFormItem label="录入时间" name="time" :label-col="{}">
              <ADatePicker v-model:value="model.time" placeholder="请选择录入时间" />
            </AFormItem>
          </ACol>
          <ACol :lg="8" :xs="12">
            <AFormItem label="检验类型" name="checkType" :label-col="{}">
              <ARadioGroup v-model:value="model.checkType" name="radioGroup">
                <ARadio value="1">首检</ARadio>
                <ARadio value="2">巡检</ARadio>
              </ARadioGroup>
            </AFormItem>
          </ACol>
          <ACol :lg="8" :xs="12">
            <AFormItem label="检验数量(PNL)" name="pnl" :label-col="{}">
              <AInput v-model:value="model.pnl" placeholder="请输入检验数量(PNL)" />
            </AFormItem>
          </ACol>
          <template v-for="item in inputList" :key="item.key">
            <ACol :lg="8" :xs="12">
              <AFormItem :label="item.title" :name="item.key" :label-col="{}">
                <template v-if="item.type == 'select'">
                  <ASelect
                    v-model:value="model[item.key]"
                    :placeholder="item.placeholder || `请选择${item.title}`"
                    :disabled="item.disabled"
                  >
                    <ASelectOption v-for="o in item.selectOptions" :key="o.value" :value="o.value">
                      {{ o.name }}
                    </ASelectOption>
                  </ASelect>
                </template>
                <template v-else-if="item.type == 'radio'">
                  <ARadioGroup v-model:value="model[item.key]" :name="item.key">
                    <ARadio v-for="o in item.selectOptions" :key="o.value" :value="o.value">{{ o.name }}</ARadio>
                  </ARadioGroup>
                </template>
                <AInput
                  v-else
                  v-model:value="model[item.key]"
                  :placeholder="item.placeholder || `请输入${item.title}`"
                  :disabled="item.disabled"
                />
              </AFormItem>
            </ACol>
          </template>
        </ARow>
        <ATabs v-model:activeKey="activeKey">
          <ATabPane key="1" tab="项目质量"></ATabPane>
        </ATabs>
        <ATable :columns="columns" :data-source="data" size="small" row-key="id" />
        <ATabs v-model:activeKey="activeKey">
          <ATabPane key="1" tab="人员信息"></ATabPane>
        </ATabs>
        <ARow :gutter="20">
          <ACol :lg="12" :xs="24">
            <AFormItem label="检验员" name="jyy" :label-col="{}">
              <AInput v-model:value="model.jyy" placeholder="请输入检验员" />
            </AFormItem>
          </ACol>
          <ACol :lg="12" :xs="24">
            <AFormItem label="审核人" name="shr" :label-col="{}">
              <!-- <AInputSearch v-model:value="model.lot"  class="w-60%" /> -->
              <AInput v-model:value="model.shr" placeholder="请输入审核人" />
            </AFormItem>
          </ACol>
        </ARow>
      </AForm>
    </div>
  </AModal>
</template>

<style lang="scss">
$color: rgba(0, 0, 0, 0.5);
$size: 7px;

.menu-modal {
  .ant-modal-header {
    .ant-modal-title {
      text-align: center;
    }
  }
}

.my-form-content {
  border: 1px solid #eee;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: $color transparent;

  &::-webkit-scrollbar-thumb {
    background-color: $color;
    border-radius: $size;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: $color;
    border-radius: $size;
  }
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
  }
}
</style>
